<!--
 * @Author: luthor luthor-li@qq.com
 * @Date: 2024-03-09 01:01:08
 * @LastEditors: fisher luthor-li@qq.com
 * @LastEditTime: 2024-04-03 12:56:14
 * @FilePath: \allfront\src\modules\cloud\projManager\bigfileDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog
    v-model="dialogFormVisible"
    title="集群节点进程"
    width="1200"
    :destroy-on-close="true"
  >
    <el-table
      ref="multipleTableRef"
      :data="processData"
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column property="pid" label="进程PID" width="120" />
      <el-table-column property="name" label="进程名称" width="120" />
      <el-table-column property="status" label="进程状态" width="120">
        <template #default="scope">
          <el-button type="success" v-if="scope.row.status === 'online'">
            运行中
          </el-button>
          <el-button type="info" v-else> 已停止</el-button>
        </template>
      </el-table-column>
      <el-table-column property="restartTime" label="重启次数" width="120">
        <template #default="scope"> {{ scope.row.restartTime }}次 </template>
      </el-table-column>
      <el-table-column property="memory" label="内存占用" width="120">
        <template #default="scope">
          {{ formatBytes(scope.row.memory) }}
        </template>
      </el-table-column>
      <el-table-column property="cpu" label="cpu占用" width="120">
        <template #default="scope">
          {{ (scope.row.cpu / 100).toFixed(2) }}%
        </template>
      </el-table-column>
      <el-table-column
        property="createAt"
        label="创建时间"
        show-overflow-tooltip
        width="180"
      />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="reloadProcess(scope.row)">
            重启
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, defineExpose } from 'vue';
import { formatBytes } from '@/utils/index';
import { useAxios } from '@/hooks/useAxios';
const { post, get, loading } = useAxios();
// 弹窗状态
const dialogFormVisible = ref(false);

const processData = reactive([]);
const getProcess = id => {
  processData.length = 0;
  get('/cluster/getprocessById', {
    clusterId: id,
  }).then(res => {
    console.log('/cluster/getprocessById', res);
    if (res.status) {
      processData.push(...res.data);
    }
  });
};
const reloadProcess = data => {
  console.log('reloadProcess', data);
  post('/cluster/reloadProcess', {
    clusterId: data.clusterId,
    processName: data.name,
  }).then(res => {
    console.log('/cluster/reloadProcess', res);
    if (res.status) {
      getProcess(data.clusterId);
    }
  });
};
defineExpose({ dialogFormVisible, getProcess });
</script>
